<script lang="ts" setup>
import { computed, getCurrentInstance, reactive, watch, onMounted } from "vue";
const { proxy }: any = getCurrentInstance();
//声明子组件参数信息
const props: any = defineProps({
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100,
  },
  value: {
    type: Number,
    default: 0,
  },
  inPosition: {
    type: Number,
    default: 0,
  },
  outPosition: {
    type: Number,
    default: 0,
  },
  inPositionSlide: {
    type: Number,
    default: 0,
  },
  outPositionSlide: {
    type: Number,
    default: 0,
  },
  playerDuration: {
    type: Number,
    default: 0,
  },
});
//设置返回参数信息
const emit = defineEmits(["updatePos", "updateInPosition", "updateOutPosition"]);
const that: any = reactive({
  slider: null,
  thunk: null,
  per: props.value,
  widthPx: "0px",
  scale: 0,
  width: "0px",
  leftPx: "0px",
  postionWidth: "0px",
  postionLeft: "0px",
  clickInPosition: () => {
    emit("updateInPosition", {
      inPosition: props.inPosition,
      inPositionSlide: props.inPositionSlide,
    });
  },
  clickOutPosition: () => {
    emit("updateOutPosition", {
      outPosition: props.outPosition,
      outPositionSlide: props.outPositionSlide,
    });
  },
});
const initData = () => {
  that.slider = proxy.$refs.slider;
  that.thunk = proxy.$refs.thunk;
  //进度条按下事件
  that.thunk.onmousedown = (event: any) => {
    let widthPx = parseInt(that.widthPx),
      clientX = event.clientX;
    //拖动
    document.onmousemove = (e: any) => {
      //计算拖动进度位置及时更新
      let widPx: any = (e.clientX - clientX + widthPx) / that.slider.offsetWidth;
      that.per = Math.ceil((props.max - props.min) * widPx + props.min);
      that.per = Math.max(that.per, props.min);
      that.per = Math.min(that.per, props.max);
      emit("updatePos", that.per); //返回拖动位置
    };
    //松开
    document.onmouseup = () => {
      document.onmousemove = document.onmouseup = null;
    };
    event.stopPropagation();
    event.preventDefault();
    return false;
  };
  //进度条按下
  that.slider.onmousedown = (event: any) => {
    let rect: any = event.currentTarget.getBoundingClientRect();
    let pageX = event.clientX - rect.left;
    let py: any = (event.clientY, rect.top, pageX / that.slider.offsetWidth);
    that.per = Math.ceil((props.max - props.min) * py + props.min);
    that.per = Math.max(that.per, props.min);
    that.per = Math.min(that.per, props.max);
    emit("updatePos", that.per);
    event.stopPropagation();
    event.preventDefault();
    return false;
  };
};
//监听进度条
watch(
  () => props.value,
  (news, olds) => {
    that.per = news;
  },
  {
    deep: true,
    // immediate: true,
  }
);
that.scale = computed(() => {
  return (that.per - props.min) / (props.max - props.min);
});
that.width = computed(() => {
  return that.slider ? 100 * that.scale + "%" : "0px";
});
that.left = computed(() => {
  return that.slider
    ? `calc(${100 * that.scale}% - ${that.thunk.offsetWidth / 2}px)`
    : "0px";
});
that.widthPx = computed(() => {
  return that.slider ? that.slider.offsetWidth * that.scale + "px" : "0px";
});
that.leftPx = computed(() => {
  return that.slider
    ? that.slider.offsetWidth * that.scale - that.thunk.offsetWidth / 2 + "px"
    : "0px";
});
that.postionWidth = computed(() => {
  let width: any = 0;
  if (that.slider) {
    width = (props.outPosition - props.inPosition - props.min) / (props.max - props.min);
    return `calc(${100 * width}%)`;
  } else {
    return `${width}px`;
  }
});
that.postionLeft = computed(() => {
  let width: any = 0;
  if (that.slider) {
    width = (props.inPosition - props.min) / (props.max - props.min);
    return `calc(${100 * width}%)`;
  } else {
    return `${width}px`;
  }
});

defineExpose({ initData });
</script>
<template>
  <div class="vjs-progress-edit">
    <div class="edit-progress-control">
      <div class="slider" ref="slider" style="position: absolute; left: 0px; top: 0px">
        <div class="bg"></div>
        <div class="process" :style="{ width: that.width }"></div>
        <div
          class="position"
          :style="{ left: that.postionLeft, width: that.postionWidth }"
        ></div>
        <div ref="thunk" class="thunk" :style="{ left: that.left }">
          <div class="block"></div>
          <div class="tips">
            <span>0</span>
            <i class="fas fa-ca-caret-down"></i>
          </div>
        </div>
      </div>
      <div
        title="入点"
        class="edit-progress-position edit-progress-start"
        :style="{
          left: (props.inPositionSlide / props.playerDuration) * 100 + '%',
        }"
        @click="that.clickInPosition"
        v-if="null !== props.inPositionSlide && 0 <= props.inPositionSlide"
      ></div>
      <div
        title="出点"
        class="edit-progress-position edit-progress-stop"
        :style="{
          left: (props.outPositionSlide / props.playerDuration) * 100 + '%',
        }"
        @click="that.clickOutPosition"
        v-if="null !== props.outPositionSlide && 0 < props.outPositionSlide"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.custom-player-skin {
  .vjs-progress-edit {
    position: absolute;
    left: 0;
    width: 100%;
    background: #292929;
    display: flex;
    align-items: center;
    bottom: 38px;
    height: 4px;
    z-index: 100;
    &:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 100%;
      height: 6px;
      background-color: rgba(44, 44, 44, 0.9);
    }
    .edit-progress-control {
      position: relative;
      display: inline-block;
      height: 100%;
      width: 100%;
      .slider {
        position: relative;
        width: 100%;
        height: 100%;
        cursor: pointer;
        .bg {
          position: absolute;
          left: 0;
          width: 100%;
          background: hsla(0, 0%, 100%, 0.3);
          border-radius: 5px;
          top: 1px;
          height: 2px;
        }
        .process {
          position: absolute;
          left: 0;
          width: 112px;
          border-radius: 5px;
          top: 1px;
          height: 2px;
          background: #fff;
        }
        .position {
          position: absolute;
          // top: 9px;
          // height: 8px;
          background-color: #38fbc2;
          top: 1px;
          height: 2px;
        }
      }
      .thunk {
        position: absolute;
        left: 100px;
        top: -6px;
        width: 16px;
        height: 16px;
        .block {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          border: 5px solid #fff;
          background: #2254f4;
          transition: all 0.2s;
        }
        .tips {
          display: none;
          position: absolute;
          left: -7px;
          bottom: 30px;
          min-width: 15px;
          text-align: center;
          padding: 4px 8px;
          background: #000;
          border-radius: 5px;
          height: 24px;
          color: #fff;
          i {
            position: absolute;
            margin-left: -5px;
            left: 50%;
            bottom: -9px;
            font-size: 16px;
            color: #000;
          }
        }
      }
      .edit-progress-position {
        position: absolute;
        top: 0;
        height: 25px;
        width: 1px;
        padding: 1px;
        border-left: 3px dotted #38fbc2;
        cursor: pointer;
        &.edit-progress-start {
          top: -7px !important;
          height: 15px;
          margin-left: -2px;
        }
        &.edit-progress-stop {
          top: -7px !important;
          height: 15px;
          margin-left: -2px;
        }
      }
    }
  }
}
</style>
